<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>月度支出额统计</title>
</head>
<!-- 引入echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<!--  引入echarts配置项 -->
<script src="../echarts/options/overheadBarOption.js"></script>
<script src="../echarts/options/overheadLineOption.js"></script>
<!-- 引入axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- 引入容器css样式 -->
<link rel="stylesheet" href="../CSS/overheadBarCSS.css" />
<!-- 引入axios -->
<script src="../axios/overheadBarAxios.js"></script>

<body>
  <!-- 头部概览导航 -->
  <div class="header wrapper">
    <ul class="headerUl">
      <!-- 总支出 -->
      <li class="overhead">
        <h3>总支出￥</h3>
        <h2>154</h2>
      </li>
      <!-- 与上月对比增长百分比 -->
      <li class="trend">
        <h3>支出增长趋势</h3>
        <h2>-15.24%</h2>
      </li>
      <!-- 总收入 -->
      <li class="income">
        <h3>总收入￥</h3>
        <h2>1000</h2>
      </li>
      <!-- 需还欠款 -->
      <li class="debt">
        <h3>欠款￥</h3>
        <h2>1000</h2>
      </li>
      <!-- 状态--学习/工作 -->
      <li class="status">
        <h3>状态</h3>
        <h2>学习中</h2>
      </li>
    </ul>
  </div>

  <!-- 中间盒子部分 -->
  <div class="middle wrapper">
    <div class="line left" id="overheadLine"></div>

    <div class="bar right" id="overheadBar"></div>

  </div>

  <!--  底部盒子部分-->
  <div class="bottom wrapper">
    <!-- 支出细分 -->
    <div class="costDetail">
      <h3>展示模块1</h3>
    </div>
    <!-- 支出细分柱状图 -->
    <div class="detailBar">
      <h3>展示模块2</h3>
    </div>
    <!-- 支出细分饼图 -->
    <div class="detailPie">
      <h3>展示模块3</h3>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // 网页加载完成时，发送axiosget请求。
      overheadBarGet("on");
    });
  </script>
</body>

</html>